<template>
  <div>
    <div @click="goto"> <xqtext ></xqtext></div>
  
   <div class="container">
  <h2>How to contact me</h2>
  <div class="accordion">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Find my qq number</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>My qq number is 2498686798.But I don't log in to qq numbers very often.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Find my mailbox</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>My usual email address is 2498686798@qq.com. However, my mailbox is only responsible for receiving emails and will not reply</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Find my phone number</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>My cell phone number is 15639509681, but please don't just call me because I might be saving the world.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Can't find me how to do nothing?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
       <p>There was no way, maybe I was fighting monsters, or maybe I was drinking milk tea with beautiful beauties in m78 nebula</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Why should I use English?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
     <p>you see see you one day day ? i 英格雷丝 is not good but for 表示 i 的 权威 so i use 英格雷丝.</p>
      </div>
    </div>
  </div>
</div>
    <!-- <img src="../assets/img/zp.jpg" > -->

   <el-dialog :visible.sync="show" width="400px">
    <img src="../assets/img/zp.jpg" width="100%"  @click="show=false">
</el-dialog>
  </div>
</template>

<script>
import xqtext from "../components/xqtext.vue";

  
  export default {

    data() {
      return {
       show:false,


    

      };
    },
      components: {
   xqtext
  },
    created() {
       if(this._isMobile()){
        this.$router.push('/main') 
      }else{
            
      }
    },
    mounted() {
      const items = document.querySelectorAll(".accordion button");

function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  
  for ( var i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}

items.forEach(item => item.addEventListener('click', toggleAccordion));

    },
    

    methods:{
        _isMobile() {
	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	 return flag;
                   },       
       goto(){
        console.log('dadadadad')
        this.show=true
                   },
    },
  
    
  };
</script>

<style scoped="scoped">
@import url("https://fonts.googleapis.com/css?family=Hind:300,400&display=swap");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Hind", sans-serif;
  background: #fff;
  color: #4d5974;
  display: flex;
  min-height: 100vh;
}

.container {
  margin: 0 auto;
  padding: 4rem;
  width: 48rem;
  padding-top:2rem ;
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #03b5d2;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: #03b5d2;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}
</style>
